<template>
	<view class="chat-item">
		<!-- 聊天列表 -->
		<view v-if="item.gstime" class="chat-list-time grace-flex-center grace-flex-vcenter grace-h6 grace-black9">{{ item.gstime }}</view>
		<view class="chat-list grace-flex" :class="{ 'chat-me': item.isme }">
			<image v-if="!item.isme" class="chat-list-avatar" :src="item.userpic" mode="widthFix" lazy-load></image>
			<view class="chat-list-body">
				<!-- 文字 -->
				<text v-if="item.type == 'text'">{{ item.data }}</text>
				<!-- 图片 -->
				<view v-if="item.type == 'img'"><image :src="item.data" mode="aspectFill" lazy-load></image></view>
			</view>
			<image v-if="item.isme" class="chat-list-avatar" :src="item.userpic" mode="widthFix" lazy-load></image>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			item:Object
		}
	}
</script>

<style lang="stylus" scoped>
.chat-list-time
	padding 50rpx 0
.chat-list
	padding 20rpx 30rpx
	.chat-list-avatar
		width 100rpx
		height 100rpx
		border-radius 100%
		flex-shrink 0
	.chat-list-body
		position relative
		background #F4F4F4
		padding 30rpx
		border-radius 20rpx
		margin-left 20rpx
		margin-right 100rpx
		image
			max-width 300rpx
			max-height 200rpx
		::after
			position absolute
			left -30rpx
			top 30rpx
			content ' '
			width 0
			height 0
			border 16rpx solid #F4F4F4
			border-color transparent #F4F4F4 transparent transparent
.chat-me
	justify-content flex-end
	.chat-list-body
		margin-left 100rpx
		margin-right 20rpx
		::after
			right -30rpx
			left auto
			border-color transparent transparent transparent #F4F4F4
</style>
